import { IDomEditor } from '@wangeditor/editor';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import '@wangeditor/editor/dist/css/style.css';
import { defineComponent, onBeforeUnmount, PropType, ref, shallowRef } from 'vue';
import './style.css';

export default defineComponent({
  props: {
    editorStyle: {
      type: Object as PropType<any>,
    },
    value: {
      type: String,
    },
    toolbarConfig: {
      type: Object as PropType<any>,
    },
  },
  emits: ['update:value', 'created', 'change'],
  setup(props, { emit }) {
    const { editorStyle, toolbarConfig, value } = props;
    const editorRef = shallowRef();
    const valueHtml = ref(value);
    const editorConfig: any = { placeholder: '请输入内容...', MENU_CONF: {} };

    // toolbar config
    const _toolbarConfig: any = toolbarConfig ?? {
      toolbarKeys: [
        'headerSelect',
        '|',
        'bold',
        'underline',
        'italic',
        'through',
        'clearStyle',
        'color',
        'bgColor',
        '|',
        'fontSize',
        'fontFamily',
        'lineHeight',
        '|',
        'bulletedList',
        'numberedList',
        {
          iconSvg:
            '<svg viewBox="0 0 1024 1024"><path d="M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z"></path></svg>',
          key: 'group-justify',
          menuKeys: ['justifyLeft', 'justifyRight', 'justifyCenter', 'justifyJustify'],
        },
        {
          iconSvg:
            '<svg viewBox="0 0 1024 1024"><path d="M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z"></path></svg>',
          key: 'group-indent',
          menuKeys: ['indent', 'delIndent'],
        },
        '|',
        'emotion',
        'insertLink',
        '|',
        'undo',
        'redo',
      ],
    };
    editorConfig.MENU_CONF['lineHeight'] = {
      lineHeightList: ['0', '0.5', '1', '1.5', '2', '2.5'],
    };
    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
      const editor = editorRef.value;
      if (editor == null) return;
      editor.destroy();
    });

    const handleCreated = (editor: IDomEditor) => {
      editorRef.value = editor; // 记录 editor 实例，重要！
      emit('created');
    };

    const onChange = () => {
      emit('update:value', valueHtml.value);
      emit('change', valueHtml.value);
    };

    const _editorStyle = editorStyle ?? { width: '100%', height: '300px' };
    return () => {
      return (
        <div class="rich-text-container">
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            editor={editorRef.value}
            defaultConfig={_toolbarConfig}
            mode="default"
          />
          <Editor
            style={_editorStyle}
            v-model={valueHtml.value}
            defaultConfig={editorConfig}
            mode="default"
            onOnCreated={handleCreated}
            onOnChange={onChange}
          />
        </div>
      );
    };
  },
});
